$('#head').load('./tou.html');
$('#footer').load('./jiao.html');
var gid = queryString('gid');
APIxiangqing({ gid }).then(({ data }) => {
    // console.log(data);
    var { price, gname, detail, img, imgs, desc } = data;
    $('.tu').html(`
    <img src=${img} alt="">
    <div class="fdj"></div>
    <div class="jz">
        <img src=${img} alt="">
    </div>
    `);
    $('.list1').html(`
    <p>${gname}<span>￥${price}</span></p>
                <h2>Nike Air VaporMax</h2>
                <h2>2020 FK</h2>
    `)
    var html = '';
    $(JSON.parse(imgs)).each((index, value) => {
        html += `<li><img src=${value} alt=""></li>`
    })
    $('.ka').html(html);
    $('.list2').html(html);
    $('.pp2').html(desc);
    $('.hh1').html('探索 ' + gname)
    // console.log(detail);
    $('.neirong').html(detail)

    //加购
    layui.use('layer', function () {
        var layer = layui.layer;
        $('.but1').click(function () {
            if (!getCookie('login_user')) {
                layer.confirm('您还没登录，是否登录？', {
                    btn: ['登录', '返回'] //可以无限个按钮
                    ,
                }, function (index, layero) {
                    //按钮【按钮一】的回调
                    location.href = './3denglu.html';
                }, function (index) {
                    //按钮【按钮二】的回调
                });
            } else {
                var id = getCookie('login_user');
                var shumu = $('.zhi').html();
                console.log(id,shumu,gid);
                APIjiagou({ gid, id, price, img, gname, shumu }).then(data => {
                    var { msg } = data;
                    // alert(msg);
                    layer.msg(msg); 
                })
            }
        })
    });
})
//点击选项卡
$(document).on('click', '.list2 li img', function () {
    // console.log(666);
    $('.tu img').attr('src', $(this).attr('src'));
})
//触发选项卡
$(document).on('mouseover', '.ka li img', function () {
    $('.tu img').attr('src', $(this).attr('src'));
})
//放大镜
$('.tu').mouseover(function () {
    $('.fdj').css('display', 'block');
    $('.jz').css('display', 'block');
    $(document).mousemove(function (e) {
        var ev = event || e;
        var maxw = $('.tu').width() - $('.fdj').width();
        var maxh = $('.tu').height() - $('.fdj').height();
        var left = e.pageX - $('.fdj').width() / 2 - $('.tu').offset().left;
        var top = e.pageY - parseInt($('.fdj').css('height')) / 2 - $('.tu').offset().top;
        left = left < 0 ? 0 : left;
        top = top < 0 ? 0 : top;
        left = left > maxw ? maxw : left;
        top = top > maxh ? maxh : top;
        $('.fdj').css({ 'left': `${left}px`, 'top': `${top}px` });
        var r = ($('.jz img').width() - $('.jz').width()) / maxw;
        $('.jz img').css({ 'left': `-${left * r}px`, 'top': `-${top * r}px` });

    })
})
$('.jia').click(function () {
    $shuliang = $('.zhi').html();
    $shuliang++;
    $('.zhi').html($shuliang);
    if ($('.zhi').html() > 1) {
        $('.jian').html('-');
    }
})
//数量加减
$('.jian').click(function () {
    console.log($('.jian').html());
    if ($('.jian').html()) {
        $shulian = $('.zhi').html();
        $shulian--;
        $('.zhi').html($shulian);
        if ($shulian == 1) {
            $('.jian').html('');
        }
    }
})
$('.tu').mouseout(function () {
    $('.fdj').css('display', 'none');
    $('.jz').css('display', 'none');
})




